<template>
  <el-container>
    <div class="c1">
      <!-- <el-button type="primary" icon="el-icon-search">搜索</el-button> -->
      <el-button size="mini" type="primary" icon="el-icon-plus" @click="addmenu"
        >新增</el-button
      >
      <el-button
        :loading="downloadLoading"
        size="mini"
        class="dBtn"
        type="warning"
        icon="el-icon-download"
        @click="download"
        >导出</el-button
      >
      <el-form :inline="true" :model="searchData" class="demo-form-inline s1">
        <el-form-item>
          <el-input
            class="search_inp"
            v-model="searchData.name"
            placeholder="输入菜单名称查询"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button
            size="mini"
            type="success"
            icon="el-icon-search"
            @click="searchBtn(searchData)"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            size="mini"
            type="warning"
            icon="el-icon-refresh-left"
            @click="searchrestBtn(searchData)"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <el-card class="c2">
      <el-table
        :data="tableData"
        style="width: 100%"
        max-height="400"
        align="center"
        stripe
        v-loading="loading"
        row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column type="index" width="50" label="序号">
        </el-table-column>
        <!-- <el-table-column prop="id" label="菜单编号" width="80" align="center">
           
            
      </el-table-column> -->
        <!-- <el-table-column prop="pid" label="上级编号" width="80" align="center">
      </el-table-column> -->
        <el-table-column prop="name" label="菜单名称"> </el-table-column>
        <el-table-column prop="icon" label="菜单图标">
          <template v-slot="prop">
            <i :class="prop.row.icon"></i>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="菜单类型">
          <template v-slot="prop">
            <el-tag size="small" type="success" v-if="prop.row.type === 1"
              >目录</el-tag
            >
            <el-tag size="small" type="success" v-else-if="prop.row.type === 2"
              >菜单</el-tag
            >
            <el-tag size="small" type="warning" v-else>按钮</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="path" label="路由地址"> </el-table-column>
        <el-table-column prop="status" label="启用状态">
          <template v-slot="prop">
            <el-button
              type="success"
              v-if="prop.row.status === 1"
              size="mini"
              round
              plain
              >已启用</el-button
            >
            <el-button type="danger" v-else plain size="mini" round
              >已禁用</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="authStr" label="权限字符"> </el-table-column>
        <el-table-column prop="isHide" label="可见">
          <template v-slot="prop">
            <el-tag size="small" type="info" v-if="prop.row.isHide == false"
              >是</el-tag
            >

            <el-tag size="small" type="warning" v-else>否</el-tag>
          </template>
        </el-table-column>

        <el-table-column width="150" label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="handleEdit(scope.row)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="handleDelete(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column> </el-table
    ></el-card>
    <el-footer v-if="searchToggle">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.pageNum.currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="this.pageNum.perPage_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.pageNum.total"
      >
      </el-pagination>
    </el-footer>
    <!-- 新增菜单对话框 start -->

    <el-dialog
      title="提示"
      :visible.sync="addmenuDialogVisible"
      width="50%"
      class="adddialog"
    >
      <el-form
        ref="ruleForm"
        :rules="rules"
        class="editform"
        label-position="left"
        label-width="80px"
        :model="addData"
      >
        <el-form-item label="上级菜单">
          <!-- <el-select v-model="addData.pid" placeholder="请选择">
         <el-option value="0" label="顶级菜单"></el-option>
          <el-option
              v-for="item in parentList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
          
        </el-select> -->
          <treeselect
            :options="tableData"
            placeholder="上级菜单（默认顶级菜单）"
            v-model="addData.pid"
            :normalizer="normalizer"
          />
        </el-form-item>
        <el-form-item label="菜单类型">
          <template>
            <el-radio v-model="addData.type" :label="1">目录</el-radio>
            <el-radio v-model="addData.type" :label="2">菜单</el-radio>
            <el-radio v-model="addData.type" :label="3">按钮</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="addData.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="菜单地址" prop="path">
          <el-input v-model="addData.path" placeholder="例：/user"></el-input>
        </el-form-item>
        <el-form-item label="菜单图标" prop="icon">
          <el-select v-model="addData.icon" placeholder="请选择">
            <el-option
              v-for="(item, index) in icons"
              :key="index"
              :label="item"
              :value="item"
            >
              <span :class="item" style="font-size: 22px"></span>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="权限字符" prop="authStr">
          <el-input v-model="addData.authStr"></el-input>
        </el-form-item>
        <el-form-item label="是否可见">
          <el-switch
            v-model="addData.isHide"
            :active-value="false"
            :inactive-value="true"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-switch
            v-model="addData.status"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addmenuDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addmenuDialog">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新增菜单对话框 end -->

    <!-- 删除 -->
    <el-dialog title="提示" :visible.sync="delmenuDialogVisible" width="30%">
      确认删除吗?
      <span slot="footer" class="dialog-footer">
        <el-button @click="delmenuDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="delmenuDialog">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog
      title="菜单修改"
      :visible.sync="editmenuDialogVisible"
      width="50%"
    >
      <el-form
        class="editform"
        ref="ruleForm2"
        :rules="rules"
        label-position="left"
        label-width="80px"
        :model="menusForm"
      >
        <el-form-item label="上级菜单">
          <el-select v-model="menusForm.pid" placeholder="请选择">
            <el-option value="0" label="顶级菜单"></el-option>
            <el-option
              v-for="item in parentList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单类型">
          <template>
            <el-radio
              v-model="menusForm.type"
              :label="1"
              v-if="menusForm.pid == 0"
              >目录</el-radio
            >
            <el-radio v-model="menusForm.type" :label="2">菜单</el-radio>
            <el-radio v-model="menusForm.type" :label="3">按钮</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="menusForm.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="菜单图标" prop="icon">
          <el-select v-model="menusForm.icon" placeholder="请选择">
            <el-option
              v-for="(item, index) in icons"
              :key="index"
              :label="item"
              :value="item"
            >
              <span :class="item" style="font-size: 22px"></span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单地址" v-if="menusForm.type == 2" prop="path">
          <el-input v-model="menusForm.path" placeholder="例：/user"></el-input>
        </el-form-item>
        <el-form-item label="权限字符" prop="authStr">
          <el-input v-model="menusForm.authStr"></el-input>
        </el-form-item>
        <el-form-item label="是否可见">
          <el-switch
            v-model="menusForm.isHide"
            :active-value="false"
            :inactive-value="true"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-switch
            v-model="menusForm.status"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editmenuDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editmenuDialog">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
import axios from "../../utils/axios";
import icons from "./icons";
import eventBus from "../../utils/eventBus";
import Treeselect from "@riophae/vue-treeselect";

import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  components: { Treeselect },
  methods: {
    //菜单列表
    getMenuList() {
      let obj = {};
      obj.isAll = true;
      axios({
        method: "GET",
        url: "/sys/menu/tree",
        params: obj,
      }).then((res) => {
        if (res.code == 200) {
          let obj = {
            id: 0,
            pid: "0",
            sort: 1,
            name: "顶级菜单",
            path: "11",
            icon: "el-icon-platform-eleme",
            type: 1,
            authStr: "111243",
            isHide: true,
            status: 1,
            link: "",
          };
          this.tableData = res.data;
          this.tableData.unshift(obj)
          this.parentList = res.data.filter((item) => item.pid == 0);
          this.loading = false;
          // this.pageNum.current = res.data.current;
          // this.pageNum.size = res.data.size;
          // this.pageNum.total = res.data.total;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //菜单查询
    getMenu(con) {
      axios({
        method: "GET",
        url: "/sys/menu",
        params: con,
      }).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.records;
          this.parentList = res.data.records.filter((item) => item.pid == 0);
          this.loading = false;
          this.pageNum.current = res.data.current;
          this.pageNum.size = res.data.size;
          this.pageNum.total = res.data.total;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //页码
    handleSizeChange(val) {
      this.pageNum.size = val;
      if (this.searchToggle) {
        this.searchData.current = this.pageNum.current;
        this.searchData.size = this.pageNum.size;
        this.getMenu(this.searchData);
      } else {
        this.getMenuList();
      }
    },
    handleCurrentChange(val) {
      this.pageNum.current = val;
      if (this.searchToggle) {
        this.searchData.current = this.pageNum.current;
        this.searchData.size = this.pageNum.size;
        this.getMenu(this.searchData);
      } else {
        this.getMenuList();
      }
    },
    //添加
    normalizer(node) {
      return {
        id: node.id,
        label: node.name,
        children: node.children,
      };
    },
    addmenu() {
      this.addmenuDialogVisible = true;
    },
    addmenuDialog() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          axios({
            method: "POST",
            url: "/sys/menu",
            data: this.addData,
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success("添加成功");
              this.addmenuDialogVisible = false;
              this.getMenuList(this.pageNum);
                 setTimeout(() => {
                this.$router.go(0);
             }, 1000);
            } else {
              console.log(res);
              this.$message.error(res.message);
            }
          });
        } else {
          this.$message.error("内容不完整");
        }
      });
    },

    addmenuhandleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    //查询
    searchBtn(con) {
      this.getMenu(con);
      this.searchToggle = true;
    },
    //导出
    download() {
      this.downloadLoading = true;
    },
    //重置
    searchrestBtn() {
      this.searchData.name = "";
      this.getMenuList();
      this.searchToggle = false;
    },
    //删除
    handleDelete(con) {
      this.delmenuDialogVisible = true;

      this.delDate = [];
      this.delDate.push(con);
    },
    delmenuDialog() {
      axios({
        method: "delete",
        url: "/sys/menu",

        data: JSON.stringify(this.delDate),
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
        },
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success("删除成功");
          this.delmenuDialogVisible = false;
          this.getMenuList(this.pageNum);
             setTimeout(() => {
                this.$router.go(0);
             }, 1000);
        } else {
          this.$message.error(res.message);
        }
      });
    },
    delmenuhandleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    //修改
    handleEdit(con) {
      this.editmenuDialogVisible = true;
      this.menusForm.icon = con.icon;
      this.menusForm.id = con.id;
      this.menusForm.isHide = con.isHide;
      this.menusForm.link = con.link;
      this.menusForm.name = con.name;
      this.menusForm.path = con.path;
      this.menusForm.pid = con.pid;
      this.menusForm.sort = con.sort;
      this.menusForm.status = con.status;
      this.menusForm.type = con.type;
      this.menusForm.authStr = con.authStr;
    },
    editmenuDialog() {
      this.$refs.ruleForm2.validate((valid) => {
        if (valid) {
          axios({
            method: "PUT",
            url: "/sys/menu",
            data: this.menusForm,
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success("修改成功");
              this.editmenuDialogVisible = false;
              this.getMenuList(this.pageNum);
              let datime = new Date();
              eventBus.$emit("gengxin", datime);
             setTimeout(() => {
                this.$router.go(0);
             }, 1000);
            } else {
              console.log(res);
              this.$message.error(res.message);
            }
          });
        } else {
          this.$message.error("内容不完整");
        }
      });
    },
    editmenuhandleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
  },
  data() {
    return {
      pageNum: {
        current: 1,
        size: 10,
        total: 0,
      },
      icons: icons,
      addmenuDialogVisible: false,
      delmenuDialogVisible: false,
      editmenuDialogVisible: false,
      searchToggle: false,
      loading: true,
      downloadLoading: false,
      delDate: [],

      searchData: {
        name: "",
      },
      menusForm: {
        authStr: "",
        icon: "",
        id: "",
        isHide: "",
        link: "",
        name: "",
        path: "",
        pid: "",
        sort: "",
        status: "",
        type: "",
      },
      tableData: [],
      parentList: [],

      addData: {
        authStr: "",
        icon: "",
        isHide: false,
        link: "",
        name: "",
        path: "",
        pid: null,
        sort: "",
        status: 1,
        type: "",
      },
      rules: {
        name: [{ required: true, message: "必填", trigger: "blur" }],
        path: [{ required: true, message: "必填", trigger: "blur" }],
        icon: [{ required: true, message: "必填", trigger: "blur" }],
        // authStr: [{ required: true, message: "必填", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getMenuList();
  },
};
</script>

<style lang="less" scoped>
.el-container {
  display: flex;
  justify-content: start;
  flex-direction: column;
  align-items: center;
}
.el-card {
  width: 100%;
}
.el-footer {
  align-self: start;
  margin-top: 1.5rem;
}
.c1 {
  display: flex;
  justify-content: start;
  margin-bottom: 1.5rem;
  width: 100%;
  .dBtn {
    margin-right: 1rem;
  }
}
.el-dialog {
  display: flex;
  justify-content: flex-start;
}
.btns {
  display: flex;
  justify-content: space-between;
}
.s1 {
  height: 0;
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
}

.el-input /deep/.el-input__inner {
  height: 3.05rem;
}
.editform {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  text-align: left;

  .el-input /deep/.el-input__inner {
    height: 3.05rem;
    font-size: 12px !important;
  }
}
.el-input /deep/.el-input__inner {
  height: 3.05rem;
  font-size: 12px !important;
}
.editform /deep/ .el-form-item {
  display: inline-block;
  margin-left: 1rem;

  width: 48%;
}
.editform /deep/ .el-form-item__content {
  height: 3.05rem;
}
.el-table /deep/ {
  font-size: 12px;
  padding: 2rem 0 0 2rem;
}
.el-switch /deep/ .el-switch__label * {
  font-size: 12px;
}
.el-table /deep/ thead {
  font-size: 12.5px;
  color: #909399;
  font-weight: 700;
}
</style>